//&和嵌套的使用
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.center{
    display: flex;
    justify-content: center;
    margin: 100px auto;
    width: 100px;
    background: rgb(255, 148, 148);
    .trigger{
        position: relative;
        width: 100%;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }
    ul{
        list-style: none;
    }
    //不写&可自动添加list
    & #list {
        position: absolute;
        display: none;
        width: 100%;
        background-color: rgb(222, 164, 255);
        transition: all 0.3s;
        li{
            width: 100%;
            text-align: center;
        }
        a{
            display: block;
            width: 100%;
            font-size: 24px;
            text-decoration: none;
            color: #000;
            transition: all 0.3s;
        }
        a:hover {
            background-color: brown;
        }
    }
    .trigger:hover{
        background-color: aqua;
    }
    .trigger:hover #list {
        display: block;
    }
    .trigger:has(#list:hover) {
        background-color: rgb(255, 148, 148);
    }
    }
    // 媒体查询
    //实战
    
    